<template>
  <div>
    <a-form
      :model="libraryData"
      name="basic"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 12 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="药品名称"
        :rules="[{ required: true, message: '请输入药品名称！' }]"
        :wrapper-col="{ span: 16 }"
        name="drugsId"
      >
        <a-select
          v-model:value="libraryData.drugsId"
          show-search
          placeholder="请输入药品"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :options="drugsData"
          @search="searchDrugs"
        ></a-select>
      </a-form-item>
      <a-form-item
        v-if="userInfo.empId == 0"
        label="社区名称"
        :rules="[{ required: true, message: '请输入社区名称！' }]"
        :wrapper-col="{ span: 16 }"
        name="communityId"
      >
        <a-select
          v-model:value="libraryData.communityId"
          show-search
          placeholder="请输入社区"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :options="communityData"
          @search="searchCommunit"
        ></a-select>
      </a-form-item>
      <a-form-item
        label="库存"
        name="stock"
        :wrapper-col="{ span: 16 }"
        :rules="[{ required: true, message: '请输入库存！' }]"
      >
        <a-input-number
          :min="1"
          style="width: 100%"
          v-model:value.number="libraryData.stock"
          placeholder="请输入库存"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button
          style="margin-right: 20px; background-color: #b83b5e"
          type="primary"
          html-type="submit"
          >添加</a-button
        >
        <a-button @click="reset">重置</a-button>
      </a-form-item>
    </a-form>

    <!-- 添加的列表 -->
    <a-table
      tableLayout="fixed"
      :data-source="libraryList.data"
      :columns="libraryListCloumns"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'expirationDate'">
          <a-tooltip>
            <template #title>{{ record.expirationDate }}</template>
            <div class="hidden">
              {{ stringSlicing(record.expirationDate) }}
            </div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            @click="deleteLibrary(index)"
            type="primary"
            style="background-color: #f38181"
            danger
            >删除</a-button
          >
        </template>
      </template>
    </a-table>

    <!-- 入库操作 -->
    <a-row>
      <a-col :span="11"></a-col>
      <a-button
        style="margin-right: 20px; background-color: #b83b5e"
        type="primary"
        @click="pushStorage"
        >入库</a-button
      >
      <a-button @click="clearAll" style="margin-right: 20px">全部清空</a-button>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { queryKey, apiGetDetails } from '@/api/Community/api'
import { apiQueryKey, apiDrugsDetails, apiPushStore } from '@/api/Drugs/api'
import { message } from 'ant-design-vue'
import { libraryListCloumns } from './columns'
import { userUserStore } from '@/stores/UserStore'
const store = userUserStore()
const userInfo: any = ref({})
const emit = defineEmits(['receiveData'])
const drugsData = ref([])
const libraryData = ref({
  drugsId: null,
  communityId: null,
  stock: 1,
})
let timeout: any = ref(null)
let timeout2: any = ref(null)
const libraryList = reactive<any>({
  data: [],
})

const communityData: any = ref([])

//入库操作
const pushStorage = async () => {
  if (libraryList.data.length == 0) {
    return message.error('请先将药品进行添加！')
  }
  try {
    await apiPushStore(libraryList.data)
    emit('receiveData', 3)
  } catch (error) {
    emit('receiveData', 1)
  }
  reset()
}
//重置
const reset = () => {
  //判断是否是超级管理员
  if (userInfo.value.empId == 0) {
    libraryData.value = {
      drugsId: null,
      communityId: null,
      stock: 1,
    }
  } else {
    libraryData.value = {
      drugsId: null,
      communityId: userInfo.value.communityId,
      stock: 1,
    }
  }
}

const deleteLibrary = (index: number) => {
  libraryList.data.splice(index, 1)
}
//清空数据
const clearAll = () => {
  libraryList.data = []
}
const stringSlicing = (str: string) => {
  return str.split('T')[0]
}
//获取社区列表数据
const searchCommunit = (value: any) => {
  if (timeout.value) {
    clearTimeout(timeout.value)
    timeout.value = null
  }

  timeout.value = setTimeout(async () => {
    let res = await queryKey({
      communityName: value,
    })
    communityData.value = res.data.map((ele: any) => {
      return {
        label: ele.communityName,
        value: ele.communityId,
        ...ele,
      }
    })
  }, 300)
}

//获取药品列表数据
const searchDrugs = (value: any) => {
  if (timeout2.value) {
    clearTimeout(timeout.value)
    timeout.value = null
  }

  timeout2.value = setTimeout(async () => {
    let res = await apiQueryKey({
      drugsName: value,
    })
    drugsData.value = res.data.map((ele: any) => {
      return {
        label: ele.drugsName,
        value: ele.drugsId,
        ...ele,
      }
    })
  }, 300)
}
const onFinish = async () => {
  let drugsInfo = await apiDrugsDetails(libraryData.value.drugsId)

  let communityInfo = await apiGetDetails(libraryData.value.communityId)

  let { drugsId, drugsName, price, expirationDate } = drugsInfo.data
  let { communityName, communityId } = communityInfo.data
  let item = {
    drugsId,
    drugsName,
    stock: libraryData.value.stock,
    price,
    expirationDate,
    communityName,
    communityId,
  }
  libraryList.data.unshift(item)
  reset()
}

onMounted(() => {
  //如果不是超级管理员就对社区id进行固定
  userInfo.value = store.employeeInfo
  if (userInfo.value.empId != 0) {
    libraryData.value.communityId = userInfo.value.communityId
  }
})
</script>

<style lang="less" scoped></style>
